<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ForEat</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
    <script th:src="@{/static/main.js}"></script>

    <style>
        * {
            -webkit-user-drag: none;
            user-select: none;
        }
        ::-webkit-scrollbar {
            display: none;
        }

        html,
        body {
            height: 100%;
        }
        body{
            margin: 0;
            /*padding: 5px;*/
            height: 100%;
        }

        .el-container,
        .el-main {
            overflow-y: scroll;
            scrollbar-color: transparent transparent;
            scrollbar-track-color: transparent;
            height: 100%;
            padding: 0;
        }
        .el-main{
            /*background-color: red;*/
            border: 1px solid #458b74;
            box-sizing: border-box;
        }

        .el-header {
            background-color: #458b74;
            color: #fff;
            text-align: center;
            font-size: 25px;
            line-height: 60px;
            border-radius: 5px 5px 0 0;
        }

        .el-footer {
            background-color: #458b74;
            color: #fff;
            text-align: center;
            font-size: 18px;
            line-height: 50px;
            border-radius: 0 0 5px 5px;
        }


    </style>

</head>
<body>
<el-container id="app">


    <!-- 标题栏 -->
    <el-header height="70px">
        <el-row style="position: relative;top: 10px;">
            <el-menu
                    :default-active='1'
                    class="el-menu-demo"
                    mode="horizontal"
                    background-color="#458b74"
                    text-color="#fff"
                    font-size="25px"
                    active-text-color="#BDB76B">

                <el-menu-item index="1"><a th:href="@{/}" style="font-size: 30px;text-decoration: none">蜗牛餐饮</a>
                </el-menu-item>


                <el-submenu index="3" active="true" style="margin-left: 140px;font-size: 22px;">
                    <template slot="title"><span style="font-size: 22px;">商　　城</span></template>
                    <el-menu-item index="3-1" style="font-size: 20px;" @click="openWork('userapp.html');">所有店铺
                    </el-menu-item>
                    <el-menu-item index="3-2" style="font-size: 20px;" @click="openWork('productmain.html');">所有产品
                    </el-menu-item>
                </el-submenu>

                <el-menu-item index="2" style="margin-left: 60px;font-size: 22px;" @click="openWork('work1.html');">
                    合作伙伴
                </el-menu-item>

                <el-menu-item index="4" style="margin-left: 60px;font-size: 22px;" @click="openWork('work2.html');">
                    营养百科
                </el-menu-item>


                <el-submenu index="5" style="margin-left: 300px;font-size: 22px;">
                    <template slot="title"><span style="font-size:25px;color:#fff;cursor:pointer;">
								<i class="el-icon-user-solid"></i>
							</span>
                        <span v-if="currentAccount" style="color: white;">欢迎您 : {{currentAccount}}</span></template>
                    <el-menu-item v-if="!currentAccount" index="5-1" style="font-size: 20px;" @click.native="login();">
                        登录
                    </el-menu-item>

                    <el-menu-item v-if="!currentAccount" index="5-2" style="font-size: 20px;" @click.native="register();">
                        注册
                    </el-menu-item>

                    <el-menu-item v-if="currentAccount" index="5-3" style="font-size: 20px;" @click.native="openWork('usercenter.html');">
                        个人中心
                    </el-menu-item>

                    <el-menu-item v-if="currentAccount" index="5-1" style="font-size: 20px;" @click.native="openWork('usercartbyel.html');">
                        我的购物车
                    </el-menu-item>

                    <el-menu-item v-if="currentAccount" index="5-2" style="font-size: 20px;" @click.native="openWork('userorder.html');">
                        我的订单
                    </el-menu-item>

                    <el-menu-item v-if="currentAccount" index="5-4" style="font-size: 20px;" @click.native="logout();">
                        退出
                    </el-menu-item>

                </el-submenu>

            </el-menu>
        </el-row>
    </el-header>


    <el-main style="position: relative;">
        <div v-html="work" style="height:100%;width:100%;overflow-y: hidden"></div>
    </el-main>

    <el-footer height="50px" style="position: relative;bottom: 0;" >
        <el-row>
            <el-col :span="20" :offset="2">
                杭州摆烂小组&nbsp;&nbsp;&nbsp;&nbsp;©bailan.com&nbsp;&nbsp;&nbsp;&nbsp;无ICP证&nbsp;070777号&nbsp;&nbsp;&nbsp;&nbsp;无ICP备&nbsp;10111119号-1&nbsp;&nbsp;&nbsp;&nbsp;无公网安备&nbsp;10000002000002号
            </el-col>
        </el-row>
    </el-footer>

</el-container>


<script>
    var app = new Vue({
        el: "#app",
        data: {

            work: "<iframe frameborder=0 width=100% height=100% src='/userapp.html'>",

            currentAccount: '',
            keyword: '',


        },
        methods: {
            //openWork
            openWork: function (work) {
                this.work = "<iframe frameborder=0 width=100% height=100% src='" + work + "'></iframe>";
            }
            ,
            initCurrentAccount() {
                let _this = this;
                $.get("/user/currentAccount", function (data) {
                    _this.currentAccount = data;
                })
            }
            ,
            register() {
                location.href = "/userregister.html";
            }
            ,
            login() {
                location.href = "/userlogin.html";
            }
            ,
            logout() {
                $.get("/user/logout", function () {
                    location.href = "/homeh.html";
                })
            }
            ,
            //改变当前激活菜单的 index
            changeActive(work) {
                this.openWork(work);
                $(".el-menu-demo").prop("default-active", '2');
                //todo $(".el-menu-demo").prop(":default-active","2");
            }
        }
        ,
        created() {
            this.initCurrentAccount();
            console.log(this.currentAccount);
        }
    });
</script>

</body>
</html>
